<template>
  <div v-loading="loading" element-loading-text="拼命加载中...">
    <!-- 顶部信息 -->
    <el-page-header v-if="showPageHeader" class="box-shadow mb-3" icon="arrow-left" @back="handleGoBack">
      <template #extra>
        <div class="flex items-center">
          <el-button icon="upload" type="success" @click="handleVersionFormShow(1,0)">发布版本</el-button>
          <el-button icon="refresh" @click="handleRefresh">刷新信息</el-button>
          <el-button icon="arrow-left" @click="handleGoBack">返回上页</el-button>
        </div>
      </template>
    </el-page-header>

    <!-- 应用信息 -->
    <el-card v-if="formData.id > 0" class="content-card mb-3">
      <div class="app">
        <div class="app-icon">
          <el-image :src="formData.icon_url"/>
        </div>
        <div class="app-info">
          <h3 class="app-info-name">{{ formData.name }}</h3>
          <div class="app-info-bundle">
            <span>Bundle ID: {{ formData.bundle_id }}</span>
          </div>
          <div class="app-info-attrs">
            <span v-if="formData.type == 0"><SvgIcon icon="android-fill" size="16" style="margin-right: 5px"></SvgIcon>适用于 Android 设备</span>
            <span v-if="formData.type == 1"><SvgIcon icon="apple-fill" size="16" style="margin-right: 5px"></SvgIcon>适用于 iOS 设备</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 版本信息 -->
    <AppVersionList ref="versionListRef" v-permission="'app:info:version:list'" :app-id="id" @update="handleVersionFormShow"/>

    <!-- 版本操作 -->
    <AppVersionForm ref="versionFormRef" @refresh="handleRefresh"/>
  </div>
</template>

<script lang="ts" setup>

import { nextTick, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useTabsNavStore } from '@/store';
import { SvgIcon } from '@/components/icon';
import { appInfo, defAppInfo } from '@/api/api-app.ts';
import AppVersionList from '@/views/app/version/app-version-list.vue';
import AppVersionForm from '@/views/app/version/app-version-form.vue';

const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  showPageHeader: {
    type: Boolean,
    default: true
  }
});

const currentRoute = useRoute();
const tabsNavStore = useTabsNavStore();
const loading = ref(false);
const formData = ref({...defAppInfo});
const versionListRef = ref<any>();

/** 初始化 **/
onMounted(async () => {
  handleRefresh();
})

/** 刷新数据 */
const handleRefresh = () => {
  initData(props.id);
  nextTick(() => {
    versionListRef.value?.handleSearch();
  });
};

/** 返回上一页 */
const handleGoBack = () => {
  tabsNavStore.delView(currentRoute);
  window.history.back();
};

/** 数据加载 */
const initData = async (id: number) => {
  if (!id || id <= 0) return;

  loading.value = true
  try {
    // 加载用户数据
    const {data} = await appInfo(id)
    formData.value = data;
  } finally {
    loading.value = false
  }
};

/** 应用版本新增或编辑操作 */
const versionFormRef = ref<any>()
const handleVersionFormShow = (mode: number, id?: number) => {
  versionFormRef.value?.open(mode, id)
};
</script>

<style lang="scss" scoped>
.app {
  display: flex;

  .app-icon {
    display: flex;
    padding: 10px;

    .el-image {
      width: 66px;
      height: 66px;
      border-radius: 6px;
      border: 1px solid var(--el-border-color);
    }
  }

  .app-info {
    flex: 1;

    span {
      margin-right: 15px;
      color: #9e9e9e;
      font-size: 13px;
      line-height: 21px;
    }

    h3 {
      font-size: 15px;
      -webkit-margin-after: 0.2em;
    }
  }
}
</style>
